<template>
  <div class="select">
    <div class="not-dizhi" v-if="!list.length">
      <i class="icon-not-dizhi"></i>
      <p>暂无商品地址</p>
    </div>
    <ul v-if="list.length">
      <li v-for="item in list">
        <div class="info"
             :class="[{'border':item.id === opt},{'border-address':item.id !== opt}]" @click="optSwitch(item)">
          <div class="main">
            <span>{{item.contact_name}} {{item.contact_phone}}</span>
            <span v-if="item.contact_wechat"><i class="icon-weixin"></i>{{item.contact_wechat}}</span>
          </div>
          <p class="text">
            {{item.prov}}{{item.city}}{{item.area}}{{item.detailed_address}}
          </p>
          <div class="dui" v-if="item.id === opt">
            <p></p>
            <i class="icon-dui-address"></i>
          </div>
        </div>
        <div class="setting">
          <div class="default" v-if="item.id === optOn">
            <i class="icon-xuanzhong moren"></i>
            已设为默认
          </div>
          <div class="default" v-if="item.id !== optOn" @click="setDefault(item.id)">
            <i class="icon-xuanzhong"></i>
            设为默认
          </div>
          <div class="operation">
            <span @click="edit(item)"><i class="icon-edit"></i>编辑</span>
            <span @click="del(item.id)"><i class="icon-del"></i>删除</span>
          </div>
        </div>
      </li>
    </ul>
    <div class="moreLoading" v-show="showMore">
      <img src="~common/image/loading.gif">
    </div>
    <div class="footer" @click="address">
      <i class="icon-add"></i>
      新增地址
    </div>
    <address-view v-if="showAddress" :title="title" :item="item" @close="closeAddress()"
                  @setting="setting()"></address-view>
  </div>
</template>

<script>
  import {ContactLists, setDefaultContact, DeleteContact} from 'common/js/address'
  import AddressView from 'components/address/add'
  import {scroll} from 'common/js/scroll'
  import {mapMutations} from 'vuex'

  export default {
    data() {
      return {
        page: 1,
        opt: '', //匹配 id
        optOn: '',//设置默认地址
        list: [],//列表
        showAddress: false, //显示添加地址
        more: true,
        showMore: false,
        title: '新增商品地址',
        item: {}
      }
    },
    mounted() {
      document.title = '商品地址';
      this._ContactLists();
      //滚动到最底加载
      window.onscroll = () => {
        scroll(() => {
          if (this.more) {
            this._scroll();
          }
        });
      }
    },
    methods: {
      //编辑地址
      edit(item) {
        this.title = '编辑商品地址'
        this.item = item;
        this.showAddress = true;
      },
      //删除地址
      del(id) {
        this.$dialog.confirm({
          title: '确定删除该地址？',
          mes: '',
          opts: () => {
            DeleteContact({
              "phpsid": localStorage.getItem('token'),   //session_id
              "contact_id": id,  //地址id
            }).then(res => {
              console.log(res)
              if (res.status === 1) {
                this._ContactLists();
              } else if (res.status === 0) {
                this.$dialog.alert({
                  mes: res.msg,
                });
              }
            })
          }
        });
      },
      //保存后续操作
      setting() {
        this.showAddress = false;
        this._ContactLists();
      },
      //设置默认地址
      setDefault(id) {
        this.opt = id;
        this.optOn = id;
        setDefaultContact({
          "phpsid": localStorage.getItem('token'),   //session_id
          "contact_id": id,  //地址id
        }).then(res => {
          history.pushState({}, {}, '/address/' + id)
        })
      },
      //选中地址
      optSwitch(item) {
        this.opt = item.id;
        this.setAddress(item);
        this.$router.push('/specialtyRelease')
      },
      //添加地址
      address() {
        this.title = '新增商品地址'
        this.showAddress = true;
        this.item = {}
      },
      //关闭地址添加
      closeAddress() {
        this.showAddress = false;
      },
      //加载更多
      _scroll() {
        this.page++;
        this.showMore = true;
        ContactLists(this.page).then(res => {
          this.showMore = false;
          if (res.status === 1) {
            if (res.data == null) {
              this.more = false;
            } else {
              this.list = this.list.concat(res.data);
            }
          } else if (res.status < 0) {
            this.$dialog.alert({
              mes: res.expand.info, callback: () => {
                this.$router.push('/login');
              }
            });
          }
        })
      },
      //地址列表
      _ContactLists() {
        this.page = 1;
        ContactLists(this.page).then(res => {
          if (res.status === 1) {

            if (res.data) {
              this.list = res.data;
              this.opt = this.$route.params.id;
              this.optOn = res.data[0].id;
            } else {
              this.list = []
            }
          } else if (res.status < 0) {
            this.$dialog.alert({
              mes: res.expand.info, callback: () => {
                this.$router.push('/login');
              }
            });
          }
        })
      },
      ...mapMutations({
        setAddress: 'SET_SETADDRESS'
      })
    },
    components: {
      AddressView
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .select
    padding-bottom: 1.38rem;
    ul
      padding: .7rem .5rem;
      background: $background-f;
      li
        margin-bottom: .5rem;
        font-size: .38rem;

        .info
          border-radius: .1rem;
          padding: .5rem;
        .main
          display: flex;
          justify-content: space-between;
          font-size: .43rem;
          color: $color-title;
          margin-bottom: .5rem;
          i
            font-size: .46rem;
            margin-right: 1px;
        p
          line-height: .5rem;
          color: $color-address;
        .setting
          display: flex;
          justify-content: space-between;
          color: $color-text;
          margin-top: .28rem;
          .default
            i
              font-size: .3rem;
              color: $color-xuanzhong;
            .moren
              color: $color-a;
        .operation
          span
            margin-left: .2rem;
        .border-address
          position: relative;
          border: 1px solid #e6e6e6 !important;
        .border-address:before, .border:before
          content: " ";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          transform-origin: 0 0;
          transform: scale(0.5);
        .border
          position: relative;
          border: 1px solid #ff8200 !important;
          overflow: hidden;
          .dui
            position: absolute;
            top: 0;
            left: 0;
            p
              position: absolute;
              top: -.5rem;
              left: -.5rem;
              width: 1rem;
              height: 1rem;
              background: $background-btn;
              transform: rotate(135deg);
            i
              position: absolute;
              top: 0;
              left: 0;
              color: $color;
    .moreLoading
      text-align: center;
      img
        width: 2rem;

    .footer
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      line-height: 1.38rem;
      text-align: center;
      font-size: .55rem;
      color: $color;
      background: $background-btn;
    .not-dizhi
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      text-align: center;
      font-size: .45rem;
      color: $color-code;
      i
        display: inline-block;
        color: $color-xuanzhong;
        font-size: 1.6rem;
        margin-bottom: .4rem;


</style>
